$(function () {
    // 需求1 初始化文章列表  封装成函数  将来复用

    let q = {
        pagenum: 1,	   //  是	int	页码值
        pagesize: 4,   //  是	int	每页显示多少条数据
        cate_id: '',   //  否	string	文章分类的 Id
        state: '',	   //  否	string	文章的状态，可选值有：已发布、草稿
    }
    initArticleList()      //调用初始化文章列表
    function initArticleList() {
        axios({
            method: 'get',
            url: '/my/article/list',
            // git类型用params属性  post类型用data属性
            params: q
        }).then(res => {
            // console.log(res.data.data);
            if (res.data.status !== 0) {
                return layer.msg(res.data.total)
            }
            // 渲染
            let arr = []
            res.data.data.forEach(ele => {
                arr.push(`
                      <tr>
                            <td>${ele.title}</td>
                            <td>${ele.cate_name}</td>
                            <td>${dateFormat(ele.pub_date)}</td>
                            <!--<td>${ele.pub_date}</td>  -->
                            <td>${ele.state}</td>
                            <td>
                                <button data-id="${ele.Id}" class="btn-edit layui-btn layui-btn-xs">编辑</button>
                                <button data-id="${ele.Id}" class="btn-dele layui-btn layui-btn-xs layui-btn-danger">删除</button>
                            </td>
                        </tr>
                    `)
            })
            // 循环结束后,赋值
            $('tbody').empty().html(arr.join(''))
            renderPage(res.data.total)
        })
    }
    // 需求2   渲染筛选中的文章类别列表
    let form = layui.form
    initArtCateList()
    function initArtCateList() {
        axios({
            url: '/my/article/cates',
            data: $(this).serialize()
        }).then(res => {
            if (res.data.status != 0) {
                return layer.msg(res.data.message)

            }
            // 成功渲染
            let arr = ['< option value = "" > 请选择文章所属分类</>']
            res.data.data.forEach(ele => {
                arr.push(`
                <option value="${ele.Id}">${ele.name}</option>
                `)
            })
            // 循环结束赋值
            let str = arr.join('')
            $('[name=cate_id]').empty().html(str)
            form.render()
        })
    }

    // 需求3  筛选
    $('#searchForm').on('submit', function (e) {
        e.preventDefault()
        // 修改q对象中的值  然后重新渲染文章列表
        q.cate_id = $('[name=cate_id]').val()
        q.state = $('[name=state]').val()
        // 重新渲染  文章列表
        initArticleList()
    })

    // 需求4  分页
    function renderPage(total) {
        let laypage = layui.laypage;

        //执行一个laypage实例
        laypage.render({
            elem: 'pageBox', //注意，这里的 test1 是 ID，不用加 # 号
            count: total,
            limit: q.pagesize, //数据总数，从服务端得到
            curr: q.pagenum,
            // 自定义排版
            layout: ['limit', 'prev', 'page', 'next', 'count', 'skip'],
            // 自定义每页显示多少条
            limits: [2, 5, 10, 15, 20],
            jump: function (obj, first) {
                if (!first) {
                    // console.log(obj); // 表示前面控制分页的所有属性
                    // console.log(first); // 刷新页面之后，是tru，再点击页码，它就是undefined了
                    // 点击页码的时候，jump函数会触发，此时，改变data.pagesize和data.pagenum，调用renderArticle即可看对对应页的数据
                    q.pagenum = obj.curr
                    q.pagesize = obj.limit;
                    initArticleList()
                }
            }
        });
    }
    // 需求5  删除
    $('tbody').on('click', 'button:contains("删除")', function () {
        var id = $(this).data('id');
        layer.confirm('确定删除吗？', function (index) {

            axios.get(`/my/article/delete/${id}`).then(res => {
                let { status, message } = res.data;
                if (status === 0) {
                    layer.msg(message);
                    initArticleList();
                }
            })

            layer.close(index); // 关闭弹层
        });
    })
})
